<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
    <style type="text/css">
      .bg {
        background: #f00;
      }

      .font {
        font-size: 40px;
      }
    </style>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="example">
      <ul>
        <!-- v-for 还支持一个可选的第二个参数为当前项的索引 -->
        <li v-for="(item, index) in items">
          {{index}}-{{item.message}}
        </li>

        <!-- 提供第二个的参数为键名,第三个参数为索引-->
        <li v-for="(value, key, index) in object">
          {{index}}-{{key}}:{{value}}
        </li>
      </ul>

      <span v-for="n in 10">{{ n }} </span>
    </div>

    <script>
      //数据
      let data = {
        items: [{ message: 1 }, { message: 2 }, { message: 3 }, { message: 4 }],
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data
      })
    </script>
  </body>
</html>
